<template>
  <div>
    <div class="main" v-for="(item,index) in cardArr" :key="index" @click="toDetail(item)">
      <div
        class="card"
        v-if="(ossUrl||imgUrl)&&item"
        :style="{backgroundImage:'url('+(item.style_pic?imgUrl+item.style_pic:ossUrl+'/mp_3.2.4/bg_queen_card.png')+')'}"
      >
        <div class="name">{{item.name}}</div>
        <div class="desc">{{item.describe}}</div>
        <div class="btm">
          <div class="saletip">出售价</div>
          <div class="nowprice">
            <span class="yang">¥</span>
            <span>{{item.sale_price}}</span>
          </div>
          <div class="originalprice">原价¥{{item.price}}</div>
        </div>
      </div>
      <div class="cardinfo">
        <div class="lf">
          <div class="top">
            <span>卡号</span>
            <span class="val">{{item.sale_id}}</span>
          </div>
          <div class="bottom">
            <div class="blf">
              <span>出售人</span>
              <span class="val">{{item.nickname||''}}</span>
            </div>
            <div class="brt">
              <span>成交率</span>
              <span class="val">{{item.deal_rate}}</span>
            </div>
          </div>
        </div>
        <div
          class="rt"
          v-if="item.button_status!=0"
          @click.stop="buOrsale(item)"
        >{{item.button_status==1?'立即购买':'取消挂售'}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  props: {
    cardArr: {
      //卡数据
      type: Array,
      default: []
    },
    user_type: {
      //1我要买2我要卖
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      ossUrl: common.image_resource, //oss图片
      imgUrl: common.image_response //http图片
    };
  },
  watch: {
    cardArr(newVal) {
      newVal.map(item => {
        if (Number(item.deal_rate) > 0) {
          item.deal_rate = Number(item.deal_rate * 100).toFixed(0) + "%";
        }
        return item;
      });
    }
  },
  methods: {
    //   卡详情
    toDetail(item) {
      //  id 卡券id
      // source 1：跳蚤市场我要买跳转详情  2：我的卡券跳转详情
      // type: 1 卡  2 券
      let source = this.user_type == 1 ? 1 : 2;
      wx.navigateTo({
        url: `/pages/ct_store/ct_detail_flea/main?id=${item.id}&type=${
          item.type
        }&source=${source}`
      });
    },
    // 立即购买/取消挂售
    buOrsale(item) {
      if (item.button_status == 1) {
        //立即购买
        this.toDetail(item);
      } else {
        //取消挂售
        let that = this;
        wx.showModal({
          title: "提示",
          content: "是否取消挂售",
          success(res) {
            if (res.confirm) {
              that.$emit("cancle", item);
            } else if (res.cancel) {
            }
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 5px 0px rgba(226, 226, 226, 0.5);
  border-radius: 10px;
  margin-bottom: 12px;
  box-sizing: border-box;
  .card {
    min-height: 155px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    .name {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 25px;
      margin-bottom: 5px;
    }
    .desc {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
      margin-bottom: 27px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .btm {
      width: 88%;
      display: flex;
      align-items: baseline;
      position: absolute;
      left: 20px;
      bottom: 20px;
      box-sizing: border-box;
      .saletip {
        background: rgba(255, 255, 255, 0.24);
        border-radius: 100px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 16px;
        padding: 1px 7px;
        margin-right: 4px;
        position: relative;
        bottom: 2px;
        box-sizing: border-box;
      }
      .nowprice {
        font-size: 21px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 18px;
        margin-right: 10px;
        .yang {
          font-size: 14px;
        }
      }
      .originalprice {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 16px;
        text-decoration: line-through;
      }
    }
  }
  .cardinfo {
    padding: 8px 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .lf {
      width: 64%;
      box-sizing: border-box;
      .top {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
        margin-bottom: 8px;
        .val {
          color: rgba(102, 102, 102, 1);
          margin-left: 20px;
        }
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
        div {
          .val {
            color: rgba(102, 102, 102, 1);
            margin-left: 8px;
          }
          &.blf {
            width: 62%;
            display: flex;
            .val {
              width: 64%;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
    .rt {
      background: linear-gradient(
        270deg,
        rgba(232, 58, 94, 1) 0%,
        rgba(255, 168, 70, 1) 100%
      );
      border-radius: 10px;
      padding: 5px 14px;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
      box-sizing: border-box;
    }
  }
}
</style>